<template>
  <div class="p-datepickerrange-wrapper" style="width: 100%">
    <el-date-picker
      v-model="newVal[0]"
      type="date"
      v-bind="attrs"
      :format="attrs.format ? attrs.format : 'YYYY-MM-DD'"
      :valueFormat="attrs.valueFormat ? attrs.valueFormat : 'YYYY-MM-DD'"
      :disabled-date="disabledDate01"
      :placeholder="attrs.startPlaceholder"
      style="width: 47% !important"
    />
    <span
      style="width: 6% !important; display: inline-block; text-align: center"
      >{{ attrs.rangeSeparator }}</span
    >
    <el-date-picker
      v-model="newVal[1]"
      type="date"
      v-bind="attrs"
      :format="attrs.format ? attrs.format : 'YYYY-MM-DD'"
      :valueFormat="attrs.valueFormat ? attrs.valueFormat : 'YYYY-MM-DD'"
      :disabled-date="disabledDate02"
      :placeholder="attrs.endPlaceholder"
      style="width: 47% !important"
    />
  </div>
</template>

<script setup name="DatePickerRange">
import { strToArr, convertToCamelCase } from '@/utils/commo'
const { proxy, type } = getCurrentInstance()
const props = defineProps({
  // 数据
  modelValue: {
    type: [String, Array],
    default: null
  }
})

const emits = defineEmits(['update:modelValue'])
const newVal = ref([])
watch(
  () => props.modelValue,
  () => {
    let val = strToArr(props.modelValue)
    newVal.value = val
    if (newVal.value.length > 0 && !newVal.value[0] && !newVal.value[1]) {
      newVal.value = []
    }
    emits('update:modelValue', newVal.value)
  },
  {
    deep: true,
    immediate: true
  }
)
// const myValue = computed({
//   get: () => {
//     let val = strToArr(props.modelValue)
//     // val = val.length == 0 ? ['', ''] : val
//     if (val.length == 0) {
//       val = [null, null]
//     }
//     console.log('myValue', val)
//     return val
//   },
//   set: val => {
//     if (val.length > 0 && !val[0] && !val[1]) {
//       val = []
//       console.log('val', val)
//     }
//     console.log('val1', val)
//     emits('update:modelValue', val)
//   }
// })
// console.log('myValue', myValue.value)

const disabledDate01 = computed(() => {
  return time => {
    if (props.modelValue && props.modelValue[1]) {
      let date = new Date(props.modelValue[1])
      if (date) {
        return time.getTime() > date.getTime()
      } else {
        return false
      }
    } else {
      return false
    }
  }
})
const disabledDate02 = computed(() => {
  return time => {
    if (props.modelValue && props.modelValue[0]) {
      let date = new Date(props.modelValue[0])
      if (date) {
        return time.getTime() + 8.64e7 - 1000 < date.getTime()
      } else {
        return false
      }
    } else {
      return false
    }
  }
})
const attrs = computed(() => {
  let arrr = {}
  for (const key in proxy.$attrs) {
    if (key.includes('-')) {
      arrr[convertToCamelCase(key)] = proxy.$attrs[key]
    } else {
      arrr[key] = proxy.$attrs[key]
    }
  }
  return arrr
})
</script>

<style scoped>
.p-datepickerrange-wrapper {
  width: 100% !important;
}
</style>
